<template>
	<view class="page">
		<view class="swiperBox">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				<swiper class="swiper-box" @change="change" autoplay="true" circular="true">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<image :src="item.url" mode="scaleToFill" style="width: 100%;height: 100%;"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!-- <view class="meritBox">
			<view class="item">
				<view class="imgBox">
					<image src="/static/images/item1.png" mode=""></image>
				</view>
				<view class="text">八道工序</view>
			</view>
			<view class="item">
				<view class="imgBox">
					<image src="/static/images/item2.png" mode=""></image>
				</view>
				<view class="text">独立清洗</view>
			</view>
			<view class="item">
				<view class="imgBox">
					<image src="/static/images/item3.png" mode=""></image>
				</view>
				<view class="text">在线支付</view>
			</view>
			<view class="item">
				<view class="imgBox">
					<image src="/static/images/item4.png" mode=""></image>
				</view>
				<view class="text">领先技术</view>
			</view>
			<view class="item">
				<view class="imgBox">
					<image src="/static/images/item5.png" mode=""></image>
				</view>
				<view class="text">品质保证</view>
			</view>
		</view> -->
		<view class="contentBox">
			<image :src="longPhoto.photoSrc" :style="{'height': longPhoto.photoHeight,'width': longPhoto.photoWidth}"></image>
		</view>
		<view class="shadow"></view>
		<view class="place_order">
			<view class="small_box" @click="openPlaceOrder()">
				<image src="/static/images/xunhuan.svg" mode="widthFix"></image>
				<view class="text">一键清洗</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {uniSwiperDot} from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
	import { dns } from '@/pages/dns.js';
	import { HTTP } from '@/pages/http.js';
	let http = new HTTP();
	export default {
		data() {
			return {
				info: [],
				longPhoto: {
					photoSrc: '',
					photoWidth: '',
					photoHeight: ''
				},
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,.8)',
					selectedBackgroundColor: '#fff'
				},
				current: 0,
				mode: 'default'
			}
		},
		onLoad() {
			this.getBannerInfo();
		},
		methods: {
			//右上角分享功能
			onShareAppMessage: function (res) {
			  return {
			    title: 'unclearcare 球鞋洗护',
			    path: '/pages/index/index',
			    success: function (res) {
				  // 转发成功
			    },
			    fail: function (res) {
				  // 转发失败
			    }
			  }
			},
			change(e) {
				this.current = e.detail.current;
			},
			onPullDownRefresh() {
				this.getBannerInfo();
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getBannerInfo(){//获取轮播图
				uni.showLoading({
					title: '加载中..'
				})
				http.request({
					url: 'banner',
					success:(res)=>{
						uni.hideLoading();
						if(res.data.code == 200){
							this.info = res.data.data;
							this.longPhoto.photoSrc = res.data.long_img_url;
							uni.getImageInfo({
								src: this.longPhoto.photoSrc,
								success: (image)=>{
									this.longPhoto.photoWidth = image.width+'rpx';
									this.longPhoto.photoHeight = image.height+'rpx';
								}
							});
						}
					}
				})
			},
			openPlaceOrder(){
				uni.navigateTo({
					url: './placeOrder/index'
				})
			}
		},
		components: {
			uniSwiperDot
		}
	}
</script>

<style lang="scss">
	.page{
		background-color: #f5f5f9;
	}
	//轮播图
	.swiperBox {
		background-color: #fff;
		.swiper-box {
			height: 380upx;
			swiper-item {
				width: 100%;
				height: 100%
			}
		}
	}
	//优点
	.meritBox{
		display: flex;
		padding: 20upx;
		background-color: #fff;
		.item{
			width: 20%;
			.imgBox{
				width: 60upx;
				height: 60upx;
				margin: 0 auto;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				text-align: center;
				font-size: 24upx;
			}
		}
	}
	//品牌介绍
	.contentBox{
		// padding: 30upx 0;
		background-color: #fff;
		text-align: center;
		image{
			display: block;
			margin: 0 auto;
		}
	}
	// 一键下单
	.shadow{
		background-color: rgba(62, 55, 55,0.3);
		height: 180upx;
		width: 360upx;
		position: fixed;
		left: 0upx;
		right: 0upx;
		bottom: -20upx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 180upx 180upx 0 0;
		animation: one-reclaim 0.6s infinite linear;
		animation-direction: alternate;
	}
	@-webkit-keyframes one-reclaim {
	    0% {
	        opacity: 0;
	        transform: scale(0.5);
	    }
	
	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}
	
	@keyframes one-reclaim {
	    0% {
	        opacity: 0;
	        transform: scale(0.5);
	    }
	
	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	.place_order{
		background-color: rgba(62, 55, 55,0.5);
		height: 130upx;
		width: 260upx;
		position: fixed;
		left: 0upx;
		right: 0upx;
		bottom: 0upx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 130upx 130upx 0 0;
		.small_box{
			background-color: rgba(62, 55, 55,1);
			height: 110upx;
			width: 220upx;
			position: fixed;
			left: 0upx;
			right: 0upx;
			bottom: 0upx;
			margin-left: auto;
			margin-right: auto;
			border-radius: 110upx 110upx 0 0;
			text-align: center;
			padding-top: 10upx;
			image{
				width: 14px;
				height: 14px;
			}
			.text{
				color: #fff;
				font-size: 28upx;
			}
		}
	}
</style>
